<template>
  <a-spin :spinning="confirmLoading">
    <JFormContainer :disabled="disabled">
      <template #detail>
        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" name="CmsArticleForm">
          <a-row>
            <a-col :span="12">
              <a-form-item label="信息来源" v-bind="validateInfos.infoRes" id="CmsArticleForm-infoRes" name="infoRes">
                <a-input v-model:value="formData.infoRes" placeholder="请输入信息来源" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="标题" v-bind="validateInfos.title" id="CmsArticleForm-title" name="title">
                <a-input v-model:value="formData.title" placeholder="请输入标题" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="作者" v-bind="validateInfos.author" id="CmsArticleForm-author" name="author">
                <a-input v-model:value="formData.author" placeholder="请输入作者" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="文章类型" v-bind="validateInfos.categorycode" id="CmsArticleForm-categorycode" name="categorycode">
                <j-popup
                  disabled
                  placeholder="请选择文章类型"
                  v-model:value="formData.categorycode"
                  code="article_type_dict"
                  :fieldConfig="[
                    { source: 'id', target: 'categoryid' },
                    { source: 'article_type', target: 'categorycode' },
                  ]"
                  :multi="false"
                  :setFieldsValue="setFieldsValue"
                  allow-clear
                />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="文章类型id" v-bind="validateInfos.categoryid" id="CmsArticleForm-categoryid" name="categoryid">
                <a-input v-model:value="formData.categoryid" placeholder="请输入文章类型id" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="是否首页显示" v-bind="validateInfos.ishome" id="CmsArticleForm-ishome" name="ishome">
                <j-switch v-model:value="formData.ishome" :options="[1, 0]" disabled></j-switch>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="是否图片新闻" v-bind="validateInfos.ispics" id="CmsArticleForm-ispics" name="ispics">
                <j-switch v-model:value="formData.ispics" :options="[1, 0]" disabled></j-switch>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="是否显示" v-bind="validateInfos.isshow" id="CmsArticleForm-isshow" name="isshow">
                <j-switch v-model:value="formData.isshow" :options="[1, 0]" disabled></j-switch>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="简介" v-bind="validateInfos.info" id="CmsArticleForm-info" name="info">
                <a-input v-model:value="formData.info" placeholder="请输入简介" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="文章图片" v-bind="validateInfos.articleImgs" id="CmsArticleForm-articleImgs" name="articleImgs">
                <j-image-upload :fileMax="0" v-model:value="formData.articleImgs" disabled></j-image-upload>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="文章形式" v-bind="validateInfos.articleXsh" id="CmsArticleForm-articleXsh" name="articleXsh">
                <a-input v-model:value="formData.articleXsh" placeholder="请输入文章形式" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="外链地址" v-bind="validateInfos.articleAddress" id="CmsArticleForm-articleAddress" name="articleAddress">
                <a-input v-model:value="formData.articleAddress" placeholder="请输入外链地址" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="网址" v-bind="validateInfos.wangzhi" id="CmsArticleForm-wangzhi" name="wangzhi">
                <a-input v-model:value="formData.wangzhi" placeholder="请输入网址" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="置顶时间" v-bind="validateInfos.zhidingshj" id="CmsArticleForm-zhidingshj" name="zhidingshj">
                <a-input v-model:value="formData.zhidingshj" placeholder="请输入置顶时间" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="排序" v-bind="validateInfos.seq" id="CmsArticleForm-seq" name="seq">
                <a-input-number v-model:value="formData.seq" placeholder="请输入排序" style="width: 100%" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="肩题" v-bind="validateInfos.kicker" id="CmsArticleForm-kicker" name="kicker">
                <a-input v-model:value="formData.kicker" placeholder="请输入肩题" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="副题" v-bind="validateInfos.subtitle" id="CmsArticleForm-subtitle" name="subtitle">
                <a-input v-model:value="formData.subtitle" placeholder="请输入副题" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="头图是否显示" v-bind="validateInfos.imgisshow" id="CmsArticleForm-imgisshow" name="imgisshow">
                <j-switch v-model:value="formData.imgisshow" :options="[1, 0]" disabled></j-switch>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="关键字" v-bind="validateInfos.guanjianzi" id="CmsArticleForm-guanjianzi" name="guanjianzi">
                <a-input v-model:value="formData.guanjianzi" placeholder="请输入关键字" allow-clear disabled></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item
                label="内容（不带富文本标签）"
                v-bind="validateInfos.contentsSub"
                id="CmsArticleContentForm-contentsSub"
                name="contentsSub"
              >
                <a-textarea v-model:value="formData.contentsSub" :rows="4" placeholder="请输入内容（不带富文本标签）" disabled />
              </a-form-item>
            </a-col>
            <a-col :span="24" style="display: flex">
              <div style="margin-left: 36px">内容：</div>
              <a-form-item label="" v-bind="validateInfos.contents" id="CmsArticleContentForm-contents" name="contents" style="width: 100%">
                <j-editor v-model:value="formData.contents" :autoFocus="false" disabled />
              </a-form-item>
            </a-col>
          </a-row>

          <div style="margin-left: 15px">
            <!-- <a-col :span="18" style="display: flex">
              <div style="margin-right: 5px">项目状态:</div>
              <a-form-model-item label="项目状态">
                <a-radio-group v-model="formData.wfStatus" button-style="solid" @change="handleStatusChange">
                  <a-radio-button :value="1" :class="{ 'active-blue': formData.wfStatus === 1 }"> 发布 </a-radio-button>
                </a-radio-group>
              </a-form-model-item>
            </a-col> -->
            <!-- <a-col :span="24" style="margin-top: 20px; display: flex">
              <div style="margin-right: 5px">审核意见:</div>
              <a-form-model-item label="审核意见" style="width: 76%">
                <a-textarea v-model:value="formData.wfContent" rows="4" placeholder="请输入审核意见" />
              </a-form-model-item>
            </a-col> -->
          </div>
        </a-form>
      </template>
    </JFormContainer>
  </a-spin>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
import JPopup from '/@/components/Form/src/jeecg/components/JPopup.vue';
import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate} from '../CmsArticle.api';
import { Form } from 'ant-design-vue';
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';

import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
import { isNullAndUnDef } from '/@/utils/is';

const props = defineProps({
  formDisabled: { type: Boolean, default: false },
  formData: { type: Object, default: () => ({}) },
  formBpm: { type: Boolean, default: true },
});
const formRef = ref();
const wfStatus = ref();

const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const handleStatusChange = (e) => {
  formData.wfStatus = e.target.value;
};
const formData = reactive<Record<string, any>>({
  id: '',
  infoRes: '',
  title: '',
  author: '',
  categorycode: '',
  categoryid: '',
  ishome: undefined,
  ispics: undefined,
  isshow: undefined,
  info: '',
  articleImgs: '',
  articleXsh: '',
  articleAddress: '',
  wangzhi: '',
  zhidingshj: '',
  seq: undefined,
  kicker: '',
  subtitle: '',
  imgisshow: '',
  guanjianzi: '',
  contents: '',
  contentsSub: '',
  wfContent: '',
  wfStatus:''
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = reactive({});
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });

// 表单禁用
const disabled = computed(() => {
  if (props.formBpm === true) {
    if (props.formData.disabled === false) {
      return false;
    } else {
      return true;
    }
  }
  return props.formDisabled;
});

/**
 * 新增
 */
function add() {
  edit({});
}

/**
 * 编辑
 */
function edit(record) {
  nextTick(() => {
    resetFields();
    const tmpData = {};
    Object.keys(formData).forEach((key) => {
      if (record.hasOwnProperty(key)) {
        tmpData[key] = record[key];
      }
    });
    //赋值
    Object.assign(formData, tmpData);
  });
}

/**
 * 提交数据
 */
async function submitForm() {
  try {
    // 触发表单验证
    await validate();
  } catch ({ errorFields }) {
    if (errorFields) {
      const firstField = errorFields[0];
      if (firstField) {
        formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
      }
    }
    return Promise.reject(errorFields);
  }
  confirmLoading.value = true;
  const isUpdate = ref<boolean>(false);
  //时间格式化
  //   let model = formData;
  // if(model.id){
  // isUpdate.value =true
  // }
  let model = {
    id: formData.id
  };
  if (model.id) isUpdate.value = true;

  //循环数据
  for (let data in model) {
    //如果该数据是数组并且是字符串类型
    if (model[data] instanceof Array) {
      let valueType = getValueType(formRef.value.getProps, data);
      //如果是字符串类型的需要变成以逗号分割的字符串
      if (valueType === 'string') {
        model[data] = model[data].join(',');
      }
    }
  }
  // 通过
    await saveOrUpdate(model, isUpdate.value)
      .then((res) => {
        if (res.success) {
          createMessage.success(res.message);
          emit('ok');
        } else {
          createMessage.warning(res.message);
        }
      })
      .finally(() => {
        confirmLoading.value = false;
      });
}

/**
 *  popup组件值改变事件
 */
function setFieldsValue(map) {
  Object.keys(map).map((key) => {
    formData[key] = map[key];
  });
}

defineExpose({
  add,
  edit,
  submitForm,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  padding: 14px;
}
.active-blue {
  background-color: #1890ff !important;
  color: white !important;
}
</style>
